<template>
<div>
    <div class="head">
        <el-row> 
             <el-col :span="3">用户总数：{{this.user_info.length}}</el-col>
             <el-col :span="3">在线用户：{{this.count}}</el-col>
             <el-col :span="18">
                <div class="button">
                    <el-button type="success" plain @click="addTask()">添加用户</el-button>
                </div>
            </el-col>
         </el-row>
    </div>
    <div class="body">
      <el-table :data="user_info" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="100"></el-table-column>
        <el-table-column prop="password" label="密码" width="150"> </el-table-column>
        <el-table-column prop="type" label="权限" width="150" column-key="type" :filters="[{ text: '管理员', value: '1' }, { text: '用户', value: '0'}]" 
        filter-placement="bottom-end" :filter-multiple="false" 
        :filter-method="filterHandler" :formatter="formatStatus1"></el-table-column>
        <el-table-column prop="status" label="状态" width="150" column-key="status" :filters="[{ text: '在线', value: '0' }, { text: '离线', value: '1'}]" 
        filter-placement="bottom-end" :filter-multiple="false" 
        :filter-method="filterHandler" :formatter="formatStatus"></el-table-column>
        <el-table-column prop="time" label="时间" width="150" ></el-table-column>
        <el-table-column  align="right">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
           <template slot-scope="scope">
             <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
              <el-dialog title="用户信息" :modal=false :visible.sync="dialogFormVisible">
                <el-form :model="user_db">
                    <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
                      <el-row> 
                        <el-col :span="3">用户名</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10" >
                          
                          <template v-if='modform'>
                          {{user_db.name}}
                          </template>
                          <template v-else>
                            <el-input v-model="user_db.name"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">密码</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{user_db.password}}
                          </template>
                          <template v-else>
                          <el-input v-model="user_db.password"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">权限</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          <template v-if="user_db.type=='1'">
                                管理员
                              </template>
                              <template v-else>
                                用户
                              </template>
                          </template>
                          <template v-else>
                           <el-select v-model="user_db.type" placeholder="请选择用户权限">
                               <el-option label="管理员" value="1"></el-option>
                               <el-option label="用户" value="0"></el-option>
                               </el-select>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">状态</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                              <template v-if="user_db.status=='0'">
                                在线
                              </template>
                              <template v-else>
                                离线
                              </template>
                          </template>
                          <template v-else>
                               <el-select v-model="user_db.status" placeholder="请选择用户状态">
                               <el-option label="在线" value="0"></el-option>
                               <el-option label="离线" value="1"></el-option>
                               </el-select>
                          </template>
                        </el-col>
                      </el-row>
         </div> 
          </el-card>
        </el-form>
                <div slot="footer" class="dialog-footer">
                 <template v-if="modform">
                    <el-button type="primary" @click="modform =false">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible = false">返回</el-button>
                </div>
        </el-dialog>
        <el-dialog title="添加用户" :modal=false :visible.sync="dialogFormVisible1">
                <el-form :model="user_db1">
                    <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
                       <el-row> 
                        <el-col :span="3">用户名</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-input v-model="user_db1.username"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">密码</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <el-input v-model="user_db1.password"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">权限</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-select v-model="user_db1.type">
                          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="3">确认密码</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-input v-model="user_db1.password2"></el-input>
                        </el-col>
                      </el-row>
         </div> 
          </el-card>
        </el-form>
                <div slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="onSubmit">确认添加</el-button>&nbsp;&nbsp;&nbsp;
                <el-button  @click="dialogFormVisible1 = false">取消</el-button>
                </div>
        </el-dialog> 
             <el-button size="mini" type="warning"  v-if="scope.row.status=='0'" @click="handleState (scope.$index, scope.row)">禁用</el-button>                       
             <el-button size="mini" type="success" v-else  @click="handleState (scope.$index, scope.row)">恢复</el-button>                  
             <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
</div>
</template>
<script>
import axios from '../plugins/axios'  //在哪里用就在哪里引入
// require('@/mock/user_info.js')
// require('@/mock/user_db_oper.js')

export default {
    data() {
      return {
        user_info: [],
        user_db:{"username":"","password":"","type":"","status":""},
        search: '',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        formLabelWidth: '120px',
        modform:true,
        oper:0,
        user_db1:{
                "username":"",
                "password":"",
                "type":"",
                "password2":"",
            },
             options: [{
                    id: 0,
                    label: "用户"
                },
                {
                    id: 1,
                    label: "管理员"
                }
            ],
        // s:false
      }
    },
    computed:{
    count(){
        var count=0;
        for(let i=0;i<this.user_info.length;i++){
          if(this.user_info[i].status==='0'){
           count++;
         }
        }
        return count;        
      },
      // s(){
      //   for(let i=0;i<this.device_info.length;i++){
      //     if(this.device_info[i].status==0){
      //       this.s=true;
      //     }else{
      //       this.s=false;
      //     }
      //     return s;
      //   }
        
      // }
    },
    created:function(){
        axios.get('/action/user_status')
        .then(response=>{
            this.user_info=response.data.user_info;
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })

    },
    methods: {
      //添加用户
        addTask() {
            this.dialogFormVisible1 = true;
            // this.form1={

            // }
        },
      //添加用户
      onSubmit() {
         this.user_db1.oper='5'
        axios.post('action/users_db_oper',this.user_db1)
        .then(response=>{
          if(response.data===0){
              this.$message({
                          message: '添加成功',
                          type: 'success'
              });
               axios.get('/action/user_status')
                 .then(response=>{
                this.user_info=response.data.user_info;
              })
              this.dialogFormVisible1=false;
               this.modform=true;
          }
        })
        .catch(error=>{
           console.log(error);
           this.$message.error('网络错误，请联系管理员！');
        })
      },
      //判断状态
       filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        formatStatus: function (row, column) {
            return row.status == '0' ? '在线' : row.status == '1' ? '离线' : '';
        },
        formatStatus1: function (row, column) {
            return row.status == '1' ? '管理员' : row.status == '0' ? '用户' : '';
        },
        //获取排序的方式
        selectGet(vId) {
            let obj = {};
            obj = this.options.find((item) => { //这里的selectList就是上面遍历的数据源
                return item.id === vId; //筛选出匹配数据
            });
            console.log(obj.id); //我这边的name就是对应label的
            console.log(obj.label);
        },
      //保存修改发送pot请求
      saveModform(){
        this.user_db.oper='2'
       axios.post('/action/users_db_oper', this.user_db)
        .then(response=>{   
          if(response.data===0){
              this.$message({
                          message: '修改成功',
                          type: 'success'
                     });
               this.dialogFormVisible=false;
               axios.get('/action/user_status')
                 .then(response=>{
                this.user_info=response.data.user_info;
              })
               this.modform=true;
          }
        })  
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })
      },
      indexMethod(index) {
        for(let i=0;i<user_info.length;i++)
        {
          index=this.user_info[i].id;
        }
        return index;
      },
      load () {
        //this.count = 2;
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //离线浅红，在线浅蓝
      tableRowClassName({row, rowIndex}) {
        if (row.status === '1') {
          return 'warning-row';
        } else if (row.status === '0') {
          return 'success-row';
        }
        return '';
      },
      Search(index, row) {
        console.log(index, row);
      },
      //详情
      handleEdit(index, row) {
        let _this=this
          axios.post('/action/users_db_oper',{
            "oper": "0",
            "id": row.id           
         })
        .then(response=>{
             this.user_db=response.data.user_db;
             console.log(this.user_db);
             this.dialogFormVisible = true;
            
        })
              .catch(error=>{
              console.log(error);
              // alert('网络错误');
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })
      },
       //禁用
      handleState(index,row){
            axios.post('/action/users_db_oper',{
            "oper": '3',
            "id": row.id,
            "status" :row.status       
         })
        .then(response=>{
            if(response.data.status==='1'){
             this.$message({
                          message: '禁用成功',
                          type: 'success'
              });
          }
           if(response.data.status==='0'){
             this.$message({
                          message: '恢复成功',
                          type: 'success'
              });
          }

           axios.get('/action/user_status')
        .then(response=>{
          console.log(this.user_info);
            this.user_info=response.data.user_info;
            console.log(this.user_info);
        })
        })
              .catch(error=>{
              console.log(error);
              this.$message.error('网络错误，请联系管理员！');
        })
        },
        //删除
      handleDelete(index, row) {
        axios.post('/action/users_db_oper',{
            "oper": '1',
            "id": row.id,    
         })
        .then(response=>{
           if(response.data===0){
                this.$message({
                          message: '删除成功',
                          type: 'success'
                     });
               axios.get('/action/user_status')
             .then(response=>{
            this.user_info=response.data.user_info;
             })
           }
           
        })
              .catch(error=>{
              console.log(error);
                this.$message.error('网络错误，请联系管理员！');
        })
      }

    }

}
</script>
<style scoped>
 .el-table .warning-row {
    background: rgb(235, 91, 55);
  }

  .el-table .success-row {
    background: #8aec56;
  }

.head{
    position:absolute;
    top:15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    border: 1px solid black;
}
.button{
    position:absolute;
    left: 90%;
}
.body{
    position:absolute;
    top:23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
.el-select{
  width: 222px;
}
.el-input{
  width: 222px;
}

</style>


